<template>
  <div class="section">
    <el-upload
      :action="uploadUrl"
      list-type="picture-card"
      :auto-upload="true"
      :headers="headers"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-button type="primary" @click="upload">上传</el-button>
  </div>
</template>
<style lang="less" scoped></style>
<script>
import { mapState } from 'vuex'
import apiUrl from '../utils/apis'
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:7001/file',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    }
  },
  methods: {
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    getImgList(){
      this.$axios.get(apiUrl.file).then(res=>{
        console.log(res)
      })
    }
  },
  computed: mapState({
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    headers(state) {
      return {Authorization:state.Authorization}
    },
  }),
  mounted(){
    this.getImgList();
  }
}
</script>
